<template>
  <div>
    <div class="banner"><img src="../assets/images/index/img-banner.png"/></div>
    <div class="head_tip"><span></span>社保卡服务</div>
    <table class="menu" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <router-link to="socialCardInfo"><i><img src="../assets/images/index/icon-qzzp.png"/></i><label>信息查询</label>
          </router-link>
        </td>
        <td>
          <router-link to="changeInfo"><i><img src="../assets/images/index/icon-jycyz.png"/></i><label>信息修改</label>
          </router-link>
        </td>
      </tr>
      <tr>
        <td>
          <router-link to="application"><i><img src="../assets/images/index/loanquery .png"/></i><label>制卡申请</label>
          </router-link>
        </td>
        <td>
          <router-link to="applicSchedule"><i><img src="../assets/images/index/loanquery .png"/></i><label>制卡进度查询</label>
          </router-link>
        </td>
      </tr>
      <tr>
        <td>
          <router-link to="applicSuccse"><i><img src="../assets/images/index/loanquery .png"/></i><label>电子社保卡</label>
          </router-link>
        </td>
        <td>
          <router-link to="reportLoss"><i><img src="../assets/images/index/loanquery .png"/></i><label>挂失/解挂</label>
          </router-link>
        </td>
      </tr>
    </table>
    <div class="head_tip"><span></span>其他查询</div>
    <table class="menu" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <router-link to="jgSearch"><i><img src="../assets/images/index/icon-jgyl.png"/></i><label>服务机构查询</label>
          </router-link>
        </td>
        <td>
          <router-link to="other/menu"><i><img src="../assets/images/index/icon-zjyl.png"/></i><label>医疗目录查询</label>
          </router-link>
        </td>
      </tr>
    </table>
    <div>
      <router-link to="download"><img class="vertical" src="../assets/images/appdownload.png"/></router-link>
    </div>
    <div class="top10"><router-link to="factoryIndex"><img class="vertical" src="../assets/images/newfactory.png"/></router-link></div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data () {
      return {}
    },
    methods: {}
  }
  document.body.style.background = "#F2F2F2";
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .banner {
    width: 100%;
  }

  img {
    width: 100%;
    height: 100%;
  }

  .head_tip {
    background: #FFF;
    line-height: 0.45rem;
    border-bottom: 0.01rem solid #DFDFDF;
    span {
      width: 0.03rem;
      height: 0.15rem;
      display: inline-block;
      background: #3399FF;
      margin: 0.14rem 0.1rem 0 4%;
      vertical-align: top;
    }
  }

  .menu {
    width: 100%;
    background: #ffffff;
    margin-bottom: 0.1rem;
    td {
      width: 50%;
      box-sizing: border-box;
      height: 0.5rem;
      i {
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        position: relative;
        left: 0.15rem;
        top: 0.05rem;
      }
      label {
        margin-left: 0.2rem;
      }
    }
    td:first-child {
      border-bottom: 0.01rem solid #ECECEC;
      border-right: 0.01rem solid #ECECEC;
    }
    td:last-child {
      border-bottom: 0.01rem solid #ECECEC;
    }
  }

  a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0.5rem;
    text-decoration: none;
  }

  .module {
    height: 0.5rem;
    background: #ffffff;
    margin-bottom: 0.1rem;
    i {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      position: relative;
      left: 0.15rem;
      top: 0.05rem;
    }
    label {
      margin-left: 0.2rem;
    }
  }

  .vertical {
    vertical-align: middle
  }

  .top10 {
    margin-top: 0.1rem;
  }
</style>
